<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          :rules="rules"
          ref="queryForm"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="姓名：" prop="studentName">
            <el-input
              v-model="queryParams.studentName"
              placeholder="请输入姓名"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="身份证号：" prop="sfzNum">
            <el-input
              v-model="queryParams.sfzNum"
              placeholder="请输入身份证号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="准考证号：" prop="zkzNum">
            <el-input
              v-model="queryParams.zkzNum"
              placeholder="请输入准考证号"
              clearable
              size="small"
            />
          </el-form-item>
          <el-form-item label="抽验状态：" prop="spotCheckStatus">
            <el-select
              v-model="queryParams.spotCheckStatus"
              placeholder="请选择抽验状态"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in checkStatusList"
                :key="index"
                :label="item.dictLabel"
                :value="Number(item.dictValue)"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="科目：" prop="subjectId">
            <el-select
              v-model="queryParams.subjectId"
              placeholder="请选择科目"
              clearable
              size="small"
            >
              <el-option
                v-for="(item, index) in subjectList"
                :key="index"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="优生：" prop="eugenicsNum">
            <el-input
              v-model="queryParams.eugenicsNum"
              placeholder="请输入优生排名"
              clearable
              @input="((value)=>{inputValue(value,'eugenicsNum')})"
              size="small"
            />
          </el-form-item>
          <el-form-item label="差生：" prop="unfortunatelyNum">
            <el-input
              v-model="queryParams.unfortunatelyNum"
              placeholder="请输入差生排名"
              clearable
              @input="((value)=>{inputValue(value,'unfortunatelyNum')})"
              size="small"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
            >搜索</el-button
            >
            <el-button
              type="primary"
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
            >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>渲染列表</span>
      </div>
      <div class="text item">
        <el-table
          v-loading="loading"
          :data="tableList"
        >
          <el-table-column label="排名" align="center" prop="rank" />
          <el-table-column label="考生姓名" align="center" prop="studentName" />
          <el-table-column label="身份证号" align="center" prop="sfzNum" />
          <el-table-column label="准考证号" align="center" prop="zkzNum" />
          <el-table-column label="科目" align="center" prop="subjectName" />
          <el-table-column label="分数" align="center" prop="score" />
          <el-table-column label="算分答案" align="center" :formatter="anStatusFormat" />
          <el-table-column label="MQ答案" align="center" :formatter="mqStatusFormat" />
          <el-table-column label="抽验状态" align="center" :formatter="checkStatusFormat">
            <template slot-scope="scope">
              <el-switch
                v-show="scope.row.spotCheckStatus==0"
                v-model="scope.row.spotCheckStatus"
                active-value="1"
                inactive-value="0"
                @change="handleStatusChange(scope.row)"
              ></el-switch>
              <span v-show="scope.row.spotCheckStatus==1">{{checkStatusFormat(scope.row)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script>
  import {
    querySpotCheckAnswerSubject,
    querySpotCheckSubject,
    updateSpotCheckStatus
  } from "@/api/toolsystem/grade";

  export default {
    name: "singleAswList",
    props:{
      anStatusList: Array,// 算分答案状态列表
      mqStatusList: Array, // MQ答案状态列表
      checkStatusList: Array,// 抽验状态列表
    },
    data() {
      let validateContent = (rule, value, callback) => {
        if(!this.queryParams.subjectId){
          if(!value){
            callback(new Error('请选择科目'));
          }else{
            callback();
          }
        }else{
          callback()
        }
      };
      return {
        // 遮罩层
        loading: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          studentName: null,
          sfzNum: null,
          zkzNum: null,
          subjectId: null, // 科目id
          eugenicsNum: null, // 优生排名
          unfortunatelyNum: null, // 差生排名
          spotCheckStatus: null // 抽验状态
        },
        rules:{
          subjectId: [
            {
              required: true,
              validator: validateContent,
              trigger: 'blur'
            }
          ],
        },
        // anStatusList: [],// 算分答案状态列表
        // mqStatusList: [],// 考位状态列表
        // checkStatusList: [],// 抽验状态列表
        // 总条数
        total: 0,
        tableList: [],// 标签配置表格数据
        subjectList: [], // 科目数据数组
      };
    },
    created() {
      this.getSubjectList()
    },
    methods: {
      // 控制优生/差生输入框输入值
      inputValue(value, type){
        if(value.length == 1){
          this.queryParams[type] = value.replace(/[^1-9]/g,'')
        }else if(value.length > 1) {
          this.queryParams[type] = value.replace(/[^\d]/g,'')
        }
      },
      // 切换核验状态：已核验/未核验
      handleStatusChange(row) {
        this.$confirm('确认要标记为已核验吗?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let obj = {
              zkzNum: row.zkzNum,
              spotCheckStatus: row.spotCheckStatus,
              subjectId: this.queryParams.subjectId
            }
            updateSpotCheckStatus(obj)
              .then(response => {
                if (response.code != 200) {
                  row.spotCheckStatus = row.spotCheckStatus == 0 ? "1" : "0";
                  return this.msgError(response.msg)
                };
                this.msgSuccess(response.msg);
                this.getList();
              })
              .catch(error => {
                row.spotCheckStatus = row.spotCheckStatus == 0 ? "1" : "0";
                console.log(error);
              });
          })
          .catch(() => {
            row.spotCheckStatus = row.spotCheckStatus == 0 ? "1" : "0";
            this.msgInfo("取消操作");
          });
      },
      // 算分状态字典翻译
      anStatusFormat(row, column) {
        return this.selectDictLabel(this.anStatusList, row.answerSource);
      },
      // MQ答案状态字典翻译
      mqStatusFormat(row, column) {
        return this.selectDictLabel(this.mqStatusList, row.mqStatus);
      },
      // 抽验状态字典翻译
      checkStatusFormat(row, column) {
        return this.selectDictLabel(this.checkStatusList, row.spotCheckStatus);
      },
      // 筛选表单重置
      resetQuery() {
        this.$refs["queryForm"].resetFields()
        this.getList();
      },
      /** 搜索按钮操作 */
      handleQuery() {
        // this.queryParams.pageNum = 1;
        this.getList();
      },
      // 获取科目列表
      getSubjectList() {
        querySpotCheckSubject()
          .then(response => {
            if (response.code != 200) {
              return;
            }
            let dataList = response.data
            dataList.forEach(item=>{
              let obj = {
                text: item['name'],
                value: Number(item['id'])
              }
              this.subjectList.push(obj)
            })
            this.queryParams.subjectId = this.subjectList[0]['value']
          })
          .catch(error => {
            console.log(error);
          });
      },
      /** 查询列表 */
      getList() {
        this.loading = true;
        this.$refs["queryForm"].validate(valid => {
          if (!valid) return this.loading = false
          querySpotCheckAnswerSubject(this.queryParams)
            .then(response => {
              if (response.code != 200) {
                this.loading = false;
                return this.msgError(response.msg);
              }
              this.tableList = response.rows;
              this.tableList.forEach(item=>{
                item.spotCheckStatus=item.spotCheckStatus.toString()
              })
              this.total = response.total;
              this.loading = false;
            })
            .catch(error => {
              this.loading = false;
              console.log(error);
            });
        })
      },
    }
  };
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
</style>

